[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Responsive UI design *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/easyweb/v0-responsive-ui-design) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/T3ZHNQ1YiHY) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/easyweb/v0-responsive-ui-design](https://vercel.com/easyweb/v0-responsive-ui-design)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/T3ZHNQ1YiHY](https://v0.dev/chat/projects/T3ZHNQ1YiHY)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 0%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } html, body { @apply bg-black text-foreground; height: 100vh; overflow: hidden; font-family: var(--font-geist), system-ui, sans-serif; } /* Prevent mobile scrolling and bouncing */ @media (max-width: 768px) { html, body { position: fixed; width: 100%; height: 100vh; overflow: hidden; touch-action: none; -webkit-overflow-scrolling: touch; } } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Analytics } from "@vercel/analytics/react" import { Suspense } from "react" import { Geist } from "next/font/google" import "./globals.css" const geist = Geist({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-geist", }) export const metadata: Metadata = { title: "Vercel", description: "Created with v0", generator: "v0.dev", icons: { icon: "/favicon.ico", }, openGraph: { title: "Vercel", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import Hero from "@/components/Hero" export default function JustShipItPage() { return (

{/* Noise effect overlay */}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/Hero.tsx" "use client" import { useEffect, useRef } from "react" import TriangleCanvas from "@/components/TriangleCanvas" const WIDTH_RATIO_DESKTOP = 0.4 const WIDTH_RATIO_MOBILE = 0.45 const TOP_MARGIN_RATIO_DESKTOP = 0.1 const TOP_MARGIN_RATIO_MOBILE = 0.22 // Gap between triangle bottom and heading const GAP_RATIO_DESKTOP = -0.01 // slight overlap on desktop for tight look const GAP_RATIO_MOBILE = 0.12 // mobile gap pushes text lower export default function Hero() { return (

{/* Full viewport canvas */}

) } [V0_FILE]typescriptreact:file="components/TriangleCanvas.tsx" "use client" import { useEffect, useRef } from "react" import { initTriangle } from "@/lib/triangleEffect" export default function TriangleCanvas() { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const cleanup = initTriangle(containerRef.current) return cleanup }, []) return (

) } [V0_FILE]typescriptreact:file="components/TriangleFX.tsx" "use client"; // NOTE: You must install 'ogl' with `npm install ogl` for this component to work. import React, { useEffect, useRef } from 'react'; import { Renderer, Program, Mesh, Triangle } from 'ogl'; const vertex = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); }`; const fragment = ` #extension GL_OES_standard_derivatives : enable precision mediump float; uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_mouse; uniform float u_click; bool isInTriangle(vec2 uv) { // Flip vertically: y=1 (bottom) -> 0 (top) float y = 1.0 - uv.y; if (y < 0.0 || y > 1.0) return false; float xLeft = 0.5 * (1.0 - y); float xRight = 0.5 * (1.0 + y); return uv.x >= xLeft && uv.x <= xRight; } void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; if (!isInTriangle(uv)) discard; // Mouse UV (y flipped) vec2 mouseUV = u_mouse / u_resolution.xy; mouseUV.y = 1.0 - mouseUV.y; float dist = distance(uv, mouseUV); float ripple = sin(dist * 15.0 - u_time * 4.0) * 0.5 + 0.5; float burst = u_click * exp(-dist * 8.0); float intensity = 0.7 + ripple * 0.2 + burst * 0.5; float noise = fract(sin(dot(uv * 50.0, vec2(12.9898, 78.233))) * 43758.5453) * 0.05; intensity = max(intensity + noise, 0.6); // edge AA using fixed smoothstep float yFlip = 1.0 - uv.y; float xL = 0.5 * (1.0 - yFlip); float xR = 0.5 * (1.0 + yFlip); float edgeDist = min(min(uv.x - xL, xR - uv.x), yFlip); float aa = smoothstep(0.0, 0.003, edgeDist); intensity *= aa; gl_FragColor = vec4(vec3(1.0), intensity); }`; export default function TriangleFX() { const canvasRef = useRef(null); const rafRef = useRef(); const startTime = useRef(typeof window !== 'undefined' ? performance.now() : 0); const uniforms = useRef({ u_resolution: { value: [1, 1] }, u_time: { value: 0 }, u_mouse: { value: [0, 0] }, u_click: { value: 0 }, }); const clickTime = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; // Setup WebGL const renderer = new Renderer({ canvas, alpha: true, antialias: true, }); const gl = renderer.gl; gl.clearColor(0, 0, 0, 0); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // Create triangle geometry and program const triangle = new Triangle(gl); const program = new Program(gl, { vertex, fragment, uniforms: uniforms.current, transparent: true, }); const mesh = new Mesh(gl, { geometry: triangle, program }); // Resize handler function handleResize() { if (!canvas) return; const rect = canvas.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, 3); // Ensure we get the actual parent container size const parent = canvas.parentElement; const parentRect = parent ? parent.getBoundingClientRect() : rect; canvas.width = parentRect.width * dpr; canvas.height = parentRect.height * dpr; canvas.style.width = parentRect.width + 'px'; canvas.style.height = parentRect.height + 'px'; renderer.setSize(parentRect.width, parentRect.height); uniforms.current.u_resolution.value = [parentRect.width, parentRect.height]; } // Initial resize with a small delay to ensure DOM is ready setTimeout(handleResize, 0); handleResize(); window.addEventListener('resize', handleResize); // Mouse tracking function handleMouseMove(e: MouseEvent) { if (!canvas) return; const rect = canvas.getBoundingClientRect(); uniforms.current.u_mouse.value = [ e.clientX - rect.left, e.clientY - rect.top ]; } function handleClick(e: MouseEvent) { handleMouseMove(e); clickTime.current = performance.now(); uniforms.current.u_click.value = 1.0; } canvas.addEventListener('mousemove', handleMouseMove); canvas.addEventListener('click', handleClick); // Animation loop function animate() { const now = performance.now(); uniforms.current.u_time.value = (now - startTime.current) / 1000; // Decay click effect if (clickTime.current !== null) { const elapsed = (now - clickTime.current) / 1000; const decay = Math.max(0, 1 - elapsed / 2); // 2 second decay uniforms.current.u_click.value = decay; if (decay === 0) clickTime.current = null; } renderer.render({ scene: mesh }); rafRef.current = requestAnimationFrame(animate); } animate(); // Cleanup return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', handleResize); if (canvas) { canvas.removeEventListener('mousemove', handleMouseMove); canvas.removeEventListener('click', handleClick); } // Cleanup WebGL try { renderer?.gl?.getExtension('WEBGL_lose_context')?.loseContext(); } catch (e) {} }; }, []); return (

About

Tags

Share

More from nicofuture

More Templates Like This

About

Tags

Share

About

Tags

Share

More from nicofuture

More Templates Like This